<template>
  <div class="tree-detail">
    <h2>古树详细信息</h2>
    <el-card style="margin-top: 20px;">
      <h3>位置信息</h3>
      <el-descriptions :column="1" border label-class-name="my-label" class-name="my-content" align="center">
        <el-descriptions-item label="经度">
          {{ treeDetail.gpsLongitude }}
        </el-descriptions-item>
        <el-descriptions-item label="纬度">
          {{ treeDetail.gpsLatitude }}
        </el-descriptions-item>
        <el-descriptions-item label="详细地址">
          {{ treeDetail.locationAddress }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div v-if="loading">加载中...</div>
    <div v-else>
      <el-row>
        <el-col :span="24">
          <div class="grid-content ep-bg-purple-dark">
            <h3>基本信息：</h3>

            <el-descriptions :column="3" border>
              <el-descriptions-item label="树木编号" label-class-name="my-label" class-name="my-content" align="center">
                {{ treeDetail.treeId }}
              </el-descriptions-item>
              <el-descriptions-item label="中文名" align="center">
                {{ treeDetail.chineseName }}
              </el-descriptions-item>
              <el-descriptions-item label="拉丁学名" align="center">
                {{ treeDetail.scientificName }}
              </el-descriptions-item>
              <el-descriptions-item label="科" align="center">
                {{ treeDetail.familyName }}
              </el-descriptions-item>
              <el-descriptions-item label="属" align="center">
                {{ treeDetail.genusName }}
              </el-descriptions-item>
              <el-descriptions-item label="保护等级" align="center">
                {{ treeDetail.protectionLevel }}级
              </el-descriptions-item>
              <el-descriptions-item label="树龄" align="center">
                {{ treeDetail.estimatedAge }} 年
              </el-descriptions-item>
              <el-descriptions-item label="创建时间" align="center">
                {{ treeDetail.createTime }}
              </el-descriptions-item>
              <el-descriptions-item label="更新时间" align="center">
                {{ treeDetail.updateTime }}
              </el-descriptions-item>
            </el-descriptions>

          </div>
        </el-col>
        <!-- 古树描述区域 -->
        <el-col :span="24">
          <div class="grid-content ep-bg-purple-dark">
            <h3>古树描述：</h3>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="古树描述" align="center">
                {{ treeDetail.description }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-col>
        <!-- 图片展示区域 -->
        <el-col :span="24">
          <div class="grid-content ep-bg-purple-dark">
            <h3>古树图片：</h3>
            <el-row :gutter="20">
              <el-col v-for="(media, index) in treeDetail.mediaList" :key="index" :span="8">
                <div class="grid-content ep-bg-purple-light">
                  <el-image style="width: 100%; height: 100%" :src="media.mediaUrl" />
                </div>
              </el-col>
            </el-row>
          </div>
          <hr>
        </el-col>
        <el-col :span="24">

          <div class="grid-content ep-bg-purple-dark">
            <div class="qr-code-container">
              <div class="qr-code-text">打开小程序扫一扫，查看该古树信息</div>
             <el-image class="qr-code-image" :src="treeDetail.qrCodeUrl" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getTreeDetailInfo } from "@/apis/treeAPI"
import { useRoute } from 'vue-router'
const treeDetail = ref({
  treeId: 0,
  chineseName: '',
  scientificName: '',
  familyName: '',
  genusName: '',
  estimatedAge: 0,
  protectionLevel: 0,
  description: '',
  qrCodeUrl: '',
  mediaList: [],
  gpsLongitude: 0,
  gpsLatitude: 0,
  locationAddress: '',
  createTime: '',
  updateTime: ''
})
const loading = ref(true)

const route = useRoute()
onMounted(async () => {
  const treeId = route.params.id
  // 将 id 转换为 number 类型
  const numericTreeId = Number(treeId)
  if (treeId) {
    const result = await getTreeDetailInfo(numericTreeId)
    if (result.code === 1) {
      treeDetail.value = result.data
    } else {
      console.error('获取数据失败')
    }
  }
  loading.value = false
})


</script>

<style scoped>
.tree-detail {
  padding: 20px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.tree-detail h3 {
  color: #4e9c5b;
  /* 设置为你喜欢的颜色 */
  margin: 20px 0 15px 0;
  font-weight: 600;
}

.qr-code-container {
   display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20px 0;
}
.qr-code-text {
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

.qr-code-image {
  width: 300px;
  height: 300px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}




</style>